<template>
  <div>
    <div class="pagebg sorts"></div>
    <div class="container">
      <!--      <h1 class="t_nav">-->
      <!--        <span>每个人都有自己故事，只是演绎的方式不同。</span>-->
      <!--        <a href="/" class="n1">网站首页</a>-->
      <!--        <a href="javascript:void(0);" class="n2">留言</a>-->
      <!--      </h1>-->

      <CommentBox
        :commentInfo="commentInfo"
        :showCancel="showCancel"
        :userInfo="userInfo"
        @submit-box="submitBox"
      ></CommentBox>

      <div class="message_infos">
        <CommentList :commentInfo="commentInfo" :comments="comments"></CommentList>
        <div v-if="comments.length ==0" class="noComment">还没有评论，快来抢沙发吧！</div>
      </div>

    </div>
  </div>
</template>

<script>
import CommentList from "../components/CommentList";
import CommentBox from "../components/CommentBox";
import Sticky from "@/components/Sticky";
import {addComment, getCommentList} from "../api/comment";

// vuex中有mapState方法，相当于我们能够使用它的getset方法
import {mapMutations} from "vuex";

export default {
  data() {
    return {
      pageMinHeight: 0,
      source: "MESSAGE_BOARD",
      showCancel: false,
      submitting: false,
      value: "",
      comments: [],
      commentInfo: {
        // 评论来源： MESSAGE_BOARD，ABOUT，BLOG_INFO 等 代表来自某些页面的评论
        source: "MESSAGE_BOARD"
      },
      currentPage: 1,
      pageSize: 10,
      total: 0, //总数量
      toInfo: {},
      userInfo: {}
    };
  },
  watch: {},
  computed: {},
  components: {
    CommentList,
    CommentBox,
    Sticky
  },
  created() {
    this.getCommentDataList();
  },
  mounted() {
    var that = this;
    // 屏幕的高度
    this.pageMinHeight = window.innerHeight - 62
    $(window).scroll(function () {
      var docHeight = $(document).height(); // 获取整个页面的高度(不只是窗口,还包括为显示的页面)
      var winHeight = $(window).height(); // 获取当前窗体的高度(显示的高度)
      var winScrollHeight = $(window).scrollTop(); // 获取滚动条滚动的距离(移动距离)
      //还有30像素的时候,就查询
      if (docHeight == winHeight + winScrollHeight) {
        if (that.comments.length >= that.total) {
          return;
        }
        let params = {};
        params.source = "MESSAGE_BOARD";
        params.currentPage = that.currentPage + 1
        params.pageSize = that.pageSize;
        getCommentList(params).then(response => {
          if (response.code == that.$ECode.SUCCESS) {
            that.comments = that.comments.concat(response.data.records);
            that.setCommentList(this.comments);
            that.currentPage = response.data.current;
            that.pageSize = response.data.size;
            that.total = response.data.total;
          }
        });
      }
    })
  },
  methods: {
    //拿到vuex中的写的两个方法
    ...mapMutations(["setCommentList"]),
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getCommentDataList();
    },
    submitBox(e) {
      let params = {};
      params.source = e.source;
      params.userUid = e.userUid;
      params.content = e.content;
      params.blogUid = e.blogUid;
      addComment(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.$notify({
            title: "成功",
            message: "发表成功~",
            type: "success",
            offset: 100
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: response.data,
            offset: 100
          });
        }
        this.getCommentDataList();
      });
    },
    getCommentDataList: function () {
      let params = {};
      params.source = "MESSAGE_BOARD";
      params.currentPage = this.currentPage;
      params.pageSize = this.pageSize;
      getCommentList(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.comments = response.data.records;
          this.setCommentList(this.comments);
          this.currentPage = response.data.current;
          this.pageSize = response.data.size;
          this.total = response.data.total;
        }
      });
    },
  }
};
</script>
<style scoped>
.message_infos {
  width: 100%;
  min-height: 500px;
  margin-left: 10px;
}

.noComment {
  width: 100%;
  text-align: center;
}

.page {
  position: relative;
}

.block {
  position: relative;
  bottom: 0px;
}
</style>
